<template>
	<div class="me">
		<div class="head">
			个人中心
		</div>
		<div class="login">
			<img src="@/assets/img/xia2.png" alt="">
			<span>去登陆/注册</span>
		</div>
		<div class="activity">
			<div class="top">
				<p>活动订单</p><span class="iconfont">&#xe678;</span>
			</div>
			<div class="toplist">
				<div class="top2"><img src="@/assets/img/1.png" alt=""><p>待付款</p></div>
				<div class="top2"><img src="@/assets/img/1.png" alt=""><p>报名成功</p></div>
				<div class="top2"><img src="@/assets/img/1.png" alt=""><p>替补</p></div>
				<div class="top2"><img src="@/assets/img/1.png" alt=""><p>待评价</p></div>
				<div class="top2"><img src="@/assets/img/1.png" alt=""><p>退款/取消</p></div>
			</div>
		</div>
		<div class="list">
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>签证订单<span class="iconfont">&#xe678;</span></p>
			</div>
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>集市订单<span class="iconfont">&#xe678;</span></p>
			</div>
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>集市购物车<span class="iconfont">&#xe678;</span></p>
			</div>
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>代金券<span class="iconfont">&#xe678;</span></p>
			</div>
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>常用出行人<span class="iconfont">&#xe678;</span></p>
			</div>
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>常用收货地址<span class="iconfont">&#xe678;</span></p>
			</div>
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>个人资料<span class="iconfont"><i>完善个人资料100%送100元代金券</i>&#xe678;</span></p>
			</div>
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>修改密码<span class="iconfont">&#xe678;</span></p>
			</div>
			<div class="list1">
				<img src="@/assets/img/4.png" alt=""><p>游侠客app<span class="iconfont">&#xe678;</span></p>
			</div>
		</div>
		<div class="foot">
		<router-link class="foot1" tag='div' to='/'>
			<img src="@/assets/img/hom.png" alt="">
			<p>首页</p>
		</router-link>
		<div class="foot1">
			<img src="@/assets/img/shu.png" alt="">
			<p>订单</p>
		</div>
		<div class="foot1">
			<img src="@/assets/img/bird2.png" alt="">
			<p>个人中心</p>
		</div>
	</div>
	</div>
</template>
<style lang='stylus' scoped>
*{
	box-sizing: border-box;
}
.me{
	width: 100%;
	height: 100%;
	background: #f4f4f4;
}
.head{
	width: 100%;
	height: 45px;
	text-align: center;
	line-height: 45px;
	font-size: 18px;
	background: #fed101;
}
.login{
	width: 100%;
	display: flex;align-items: center;
	padding:.5rem .26rem 1.2rem;
	background-image: url('../../assets/img/yelow.png');
	background-position: center center;
	img{
		width: 16%;
	}
	span{
		font-size: .4rem;
		margin-left: .5rem;
		font-weight: bold;
		color: #333
	}
}
.activity{
	width: 96%;
	margin-left: 2%;
	padding:.26rem 0;
	position: relative;
	top: -.4rem;
	background: #fff;
	border-radius: .2rem;
}
.top{
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: .4rem;
	border-bottom: 1px solid #ccc;
	padding:0.26rem .26rem;
	p{
		font-weight: bold;
	}
}
.toplist{
	width: 100%;
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding:0 .26rem;
	margin-top: .15rem;
	img{
		width: 66%;
	}
	p{
		font-size: .36rem;
		margin-top: .1rem;
	}
}
.list{
	width: 100%;
	background: #fff;
	margin-bottom: 1.4rem;
	.list1{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left:0.26rem;
		font-size: .45rem;
		img{
			width: 6%;
		}
		p{
			display: flex;
			justify-content: space-between;
			flex:1;
			margin-left: .3rem;
			border-bottom: 1px solid #eee;
			padding:.3rem 0;
			padding-right: .26rem;
		}
		span{
			color: #333;
			i{
				color: #fcbc00;
				font-size: .35rem;
				font-style: normal;
				margin-right: .3rem;
			}
		}
	}
}
.foot{
		width: 100%;
		background: #fff;
		display: flex;
		position: fixed;
		justify-content: space-between;
		bottom: 0;
		left: 0;
		align-items: center;
		z-index: 9999;
		.foot1{
			width: 33.333%;
			text-align: center;
			padding:.1rem 0;
			img{
				width: .6rem;
			}
			p{
				font-size: .4rem;
				margin-top: .1rem;
			}
		}
	}
</style>